<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>NETTY SOCKET.IO DEMO</title>
    <base>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <style>
        body {
            padding: 20px;
        }

        .well {
            height: 150px;
            overflow: auto;
        }

        .username-msg {
            color: orange;
        }

        .connect-msg {
            color: green;
        }

        .disconnect-msg {
            color: red;
        }
    </style>
</head>

<body>
<H1>SOCKET.IO</H1>
<h4>通讯状态：</h4>
<div id="console" class="well"></div>
<h4>发送消息：</h4>
<div id="message" class="well"></div>
<h4>接收消息：</h4>
<div id="response" class="well"></div>

<button id="btnUp" onclick="up()">上线</button>
<button id="btnOff" onclick="off()">下线</button>
<button id="btnSend" onclick="send()">发送数据</button>
</body>
<script type="text/javascript">
    var socket;

    /**
     * 上线
     */
    function up() {
        connect();
    }

    /**
     * 下线
     */
    function off() {
        disConnect();
    }

    function connect() {
        var loginUserNum = '79';
        var opts = {
            query: 'loginUserNum=' + loginUserNum
        };
        socket = io.connect('http://192.168.188.128:8729', opts);
        socket.on('connect', function () {
            console.log("连接成功");
            serverOutput('<span class="connect-msg">连接成功</span>');
        });
        socket.on('push_event', function (data) {
            debugger
            output('<span class="username-msg">' + data.sessionId + ": " + data.content + ' </span>');
            console.log(data);

        });
        socket.on('disconnect', function () {
            serverOutput('<span class="disconnect-msg">' + '已下线! </span>');
        });
    }

    function disConnect() {
        socket.disconnect();
        console.log("断开连接")
    }

    function output(message) {
        var element = $("<div>" + " " + message + "</div>");
        $('#response').prepend(element);
    }

    function serverOutput(message) {
        var element = $("<div>" + message + "</div>");
        $('#console').prepend(element);
    }

    function send() {
        console.log('发送数据');
        var mes = '你好' + (new Date()).getTime();
        socket.emit('text', mes);
        var element = $("<div>" + " " + mes + "</div>");
        $('#message').prepend(element);
    }


</script>
</html>